<template>
  <div>
    <hr>
    <h2>子组件</h2>
    <input type="text" v-model="mValue">
    {{reverString}}
    {{reverString}}
    {{reverString}}
    <hr>
  </div>
</template>

<script>
export default {
  props:['msg'],//这个msg不能直接用来修改，但是可以把它先放到其他地方去
  data() {
    return {
      //这个只会在 new Vue实例化的时候，才会有值，后续不会发生改变。
      sonValue:this.mValue,
      stringValue:'HelloWoniu'
    }
  },
  //可以使用计算属性来重新转换props中的msg进行赋值
  computed:{
    // mValue是一个属性key，后面属性值，值是一个对象
    mValue:{
      get:function(){
         return this.msg;
      },
      //只要修改mValue，这个set方法就会执行！
      set:function(newValue){
          console.log(newValue);
      }
    },
    reverString:{
            get:function(){
                return this.stringValue.split('').reverse().join('');
            }
        }
  }
}
</script>

<style>

</style>